<template>
  <div v-show="dialogValue" class="user1-add f-c">
    <BackPage title="用户疑问详情" show-back @back="onPageBack" />
    <div class="user1-add-box f-g">
      <TitleBox title="基本信息" />
      <div style="margin: 36px 0" class="c-table">
        <table>
          <tr>
            <td class="bg-td">
              企业名称
            </td>
            <td>{{ currentDetail.projectName }}</td>
            <td class="bg-td" rowspan="6">
              问题描述
            </td>
            <td rowspan="6">{{ currentDetail.describe }} </td>
          </tr>
          <tr>
            <td class="bg-td">
              问题类型
            </td>
            <td>{{ currentDetail.problemTypeName }}</td>
          </tr>
          <tr>
            <td class="bg-td">
              附件资料
            </td>
            <td>
              <ClickDownload :file="currentDetail.file"/>
            </td>
          </tr>
          <tr>
            <td class="bg-td">
              服务状态
            </td>
            <td>
              <el-tag :type="currentDetail.statusType">{{ currentDetail.statusName }}</el-tag>
            </td>
          </tr>
          <tr>
            <td class="bg-td">
              联系人
            </td>
            <td>{{ currentDetail.contactName }}</td>
          </tr>
          <tr>
            <td class="bg-td">
              联系方式
            </td>
            <td>{{ currentDetail.contactPhone }}</td>
          </tr>
        </table>
      </div>
      <template v-if="currentDetail.status !== 1">
        <TitleBox title="服务过程" />
        <div class="process-on">
          <div class="title">
            问题类型：{{ currentDetail.problemTypeName }}
          </div>
          <div class="content">
            {{ currentDetail.describes }}
          </div>
          <div class="date-time">
            {{ currentDetail.createTime }}
          </div>
        </div>
        <div class="process-on-input" v-for="(item,index) in currentDetail.answerVoList || []" :key="index" >
          <el-form label-position="top">
            <el-form-item label="帮办人员回复：">
              {{ item.answer }}
            </el-form-item>
            <el-form-item label="附件：">
              <div class="f-r a-c f-w">
                <div v-for="file in item.file" :key="file.fileUrl" style="margin-right: 20px;margin-top: 10px;position: relative" >
                  <FileView2 :file="file"/>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="process-on-input" v-if="currentDetail.status === 2">
          <el-form label-position="top">
            <el-form-item label="回复内容：">
              <el-input clearable v-model="answerValue" type="textarea" :rows="5"/>
            </el-form-item>
            <el-form-item label="附件：">
              <div>
                <el-upload
                    style="width: 130px"
                    action=""
                    :before-upload="beforeUpload"
                >
                  <el-button round type="primary" icon="el-icon-upload">上传附件</el-button>
                </el-upload>
              </div>
              <div class="f-r a-c">
                <div class="file-name" style="margin-right: 20px;margin-top: 20px;position: relative" v-for="(file,fileIndex) in answerFile" :key="file.fileUrl">
                  <FileView2 :file="file"/>
                  <span class="close-icon" @click.stop="answerFile.splice(fileIndex,1)">
                    <i class="el-icon-close" />
                  </span>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <div style="text-align: right">
                <el-button type="primary" @click="saveAnswer">回复</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div style="text-align: right;margin-top: 20px">
          <el-button type="danger" @click="onClose">结束服务</el-button>
        </div>
      </template>
      <TitleBox title="回复详情" v-if="currentDetail.status === 1" />
      <div v-if="currentDetail.status === 1" style="margin: 36px 0" class="c-table">
        <table>
          <tr>
            <td class="bg-td" rowspan="6" style="height: 120px">
              回复内容
            </td>
            <td>{{ currentDetail.answerVoList && currentDetail.answerVoList.length ? currentDetail.answerVoList[0].describes : ''}}</td>
            <td class="bg-td" rowspan="6">
              附件
            </td>
            <td rowspan="6">
              <div class="f-r a-c">
                <div class="file-name" style="margin-right: 20px" v-for="file in currentDetail.answerVoList && currentDetail.answerVoList.length ? currentDetail.answerVoList[0].file || [] : []">
                  <el-link :ref="file.fileUrl" type="primary" target="_blank">{{ file.fileName}}.{{ file.fileType}}</el-link>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>

    </div>
    <el-dialog
      title="解决方式"
      :visible.sync="closeDialog"
      width="500px"
      append-to-body
    >
      <el-form>
        <el-form-item label="解决方式：">
          <el-select clearable v-model="solutionValue" placeholder="请选择">
            <el-option :value="0" label="发消息" />
            <el-option :value="1" label="电话沟通" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSaveClose">确 定</el-button>
        <el-button @click="closeDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { http_userqs, uploadFile } from '@/api'
import { handleStatus } from '@/dict'

export default {
  name: 'User1Add',
  data() {
    return {
      dialogValue: false,
      options1: [
        { value: 1, label: '地块未交付' },
        { value: 2, label: '农转用' },
        { value: 3, label: '三通一平' },
        { value: 4, label: '土地出让' },
        { value: 5, label: '土地征收' },
        { value: 6, label: '土地容积率' },
        { value: 7, label: '地块不合适' },
        { value: 8, label: '方案设计' },
        { value: 9, label: '安评能评环评' },
        { value: 10, label: '施工图审' },
        { value: 11, label: '施工困难' },
        { value: 12, label: '违章建筑' },
        { value: 13, label: '规划验收' },
        { value: 14, label: '消防验收' },
        { value: 15, label: '城管验收' },
        { value: 16, label: '政策冲突' }
      ],
      options2: handleStatus,
      currentDetail: {},
      answerValue: '',
      answerFile: [],
      solutionValue: '',
      closeDialog: false
    }
  },
  methods: {
    open(item) {
      this.answerValue = ''
      this.answerFile = []
      this.currentDetail = item
      http_userqs.read({ id: item.id }).then(res => {
        this.currentDetail = res.data
        this.currentDetail.answerVoList = (res.data.answerVoList || []).map(el => {
          let file = el.file
          if (file.includes('[{')) {
            file = JSON.parse(el.file)
          } else {
            file = [{
              fileName: '',
              fileType: '',
              fileUrl: file
            }]
          }
          return {
            ...el,
            file
          }
        })
        this.currentDetail.problemTypeName = this.options1.find(item => item.value == this.currentDetail.problemType)?.label
        this.currentDetail.statusName = this.options2.find(item => item.value == this.currentDetail.status)?.name
        this.currentDetail.statusType = this.options2.find(item => item.value == this.currentDetail.status)?.type
      })
      this.dialogValue = true
    },
    onPageBack() {
      this.$emit('get-page')
      this.dialogValue = false
    },
    beforeUpload(file) {
      uploadFile(file).then(res => {
        this.answerFile.push({
          fileName: res.fileName,
          fileType: res.suffix,
          fileUrl: res.imgUrl
        })
      })
      return false
    },
    saveAnswer() {
      if (!this.answerValue.trim()) return this.$message.error('请输入回复内容')
      http_userqs.answer({
        upId: this.currentDetail.id,
        describes: this.answerValue,
        file: JSON.stringify(this.answerFile)
      }).then(res => {
        this.$message.success(res.msg)
        this.open(this.currentDetail)
      })
    },
    onClose() {
      this.closeDialog = true
    },
    onSaveClose() {
      http_userqs.updateStatus({
        id: this.currentDetail.id,
        solution: this.solutionValue
      }).then(res => {
        this.$message.success(res.msg)
        this.$emit('get-page')
        this.closeDialog = false
        this.dialogValue = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.user1-add {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.user1-add-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 60px;
}

.process-on {
  margin-top: 20px;
  width: 100%;
  padding: 26px;
  background: #F7F7F7;
  border-radius: 18px 18px 18px 18px;
  .title {
    font-size: 26px;
    line-height: 26px;
    color: #333333;
    margin-bottom: 34px;
  }
  .content {
    color: #333333;
    font-size: 18px;
    margin-bottom: 34px;
  }
  .date-time {
    font-size: 18px;
    color: #666666;
    text-align: right;
  }
  .file-name {
    color: #C2C2C2;
    font-size: 14x;
    line-height: 14px;
    position: relative;
  }

}
.process-on-input {
  width: 100%;
  padding: 26px 63px;
  background: #F7F7F7;
  border-radius: 18px 18px 18px 18px;
  margin-top: 20px;
  .title {
    color: #333333;
    font-size: 20px;
    margin-bottom: 20px;
  }
  .el-input {
    background-color:#ffffff;
  }
  .button-list {
    width: 100%;
    position: absolute;
    left: 0;
    right: 34px;
    bottom: 34px;
  }
}
.process {
  margin: 36px 0px;
  width: 955px;
  border-radius: 31px 31px 31px 31px;
  opacity: 1;
  border: 1px solid #C2C2C2;
  padding: 36px 20px;
  .textarea {
    overflow: auto;
    padding: 34px 0;
    padding-bottom: 100px;
    position: relative;
    .button-list {
      width: 100%;
      position: absolute;
      left: 0;
      right: 34px;
      bottom: 34px;
    }
  }
  .message-list {
    overflow: auto;
    border-bottom: 1px solid #E8E8E8;
  }
  .message-item {
    margin-bottom: 40px;
    .name {
      color: #0A1629;
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 5px;
    }
    .desc {
      width: 616px;
      border-radius: 15px 15px 15px 15px;
      border: 1px solid #707070;
      padding: 10px 20px;
      .desc-content {
        color: #7D8592;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 30px;
      }
      .desc-time {
        color: #7D8592;
        font-size: 14px;
        line-height: 14px;
      }
    }
  }
  .message-item2 {
    overflow: hidden;
    .name {
      text-align: right;
      color: #333333;
    }
    .desc {
      background-color: #3F8CFF;
      border: none;
      .desc-content {
        color: #ffffff;
      }
      .file {
        .file-name {
          color: #C2C2C2;
          font-size: 14x;
          line-height: 14px;
        }
      }
      .desc-time {
        color: #ffffff;
      }
    }
  }
}

.box {
  margin: 36px 0px;
  width: 100%;
  background: #F5FAFD;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #E4E5E7;
  padding: 24px 18px;
  padding-bottom: 8px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  .box-item {
    margin-bottom: 15px;
  }
}
</style>
